<template>
  <div>
      <span class="content" :style="`height: ${height}`">
        
        <div class="left-menu">
            <el-scrollbar class="scrollbar">
          <el-tree
            ref="treeRef"
            :data="treeInfo"
            @node-click="handleNodeClick"
            node-key="recNo"
            default-expand-all
            :expand-on-click-node="false"
          >
          
            <template slot-scope="{data}">
              <span class="node">
                <svg-icon :icon-class="data.storePic"/>
                <span class="node-content">{{data.label}}</span>
                <svg-icon icon-class="trashbox" class="del" v-if="showDel && data.parentNo.length>0" @click.native.stop="handleDel(data)" />
              </span>
            </template>
          </el-tree>
          </el-scrollbar>
        </div>
        <div class="right-content">
          <slot></slot>
        </div>
      </span>
  </div>
</template>

<script>

export default {
  props: {
    height: {
      type: String,
      default: "880px"
    },
    treeInfo: {
      type: Array
    },
    showDel: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      defaultExpanded: [],
      init: true,
    }
  },
  methods: {
    handleNodeClick(treeChild) {
      this.$emit("nodeClick", treeChild);
    },
    handleDel(data) {
      this.$emit("delNode", data)
    }
    // handleExpand(treeChild) {
    //   const flag = this.defaultExpanded.some(item => item==treeChild.recNo);
    //   if(!flag) {
    //     this.defaultExpanded.push(treeChild.recNo);
    //   }
    // },
    // handleCollapse(data) {
    //   for(const i in this.defaultExpanded) {
    //     if(this.defaultExpanded[i] == data.recNo) {
    //       this.$delete(this.defaultExpanded, i);
    //       break;
    //     }
    //   }
    //   this.defaultExpanded.forEach((item, index) => {
    //     if(item === data.recNo) {
    //       this.$delete(this.defaultExpanded, index);
    //     }
    //   })
    // },
    //递归所有子级菜单默认打开
    // expandAll(child) {
    //   child.forEach(item => {
    //     if(item.children.length > 0) {
    //       this.defaultExpanded.push(item.recNo);
    //       this.expandAll(item.children);
    //     } else return
    //   })
    // }
  }
};
</script>

<style scoped lang="scss">
.content {
  display: flex;
  justify-content: space-between;
}
.left-menu {
  flex: 0 0 auto;
  border: 2px solid rgb(235, 238, 245);
  height: 100%;
  overflow-y: auto;
  padding: 20px;
}
.left-menu {
  width: 300px;
}
.right-content {
  position: relative;
  width: 84%;
  margin-left: 20px;
}
.node-content {
  margin-left: 5px;
}
.el-tree-node__content {
  position: relative;
  .del {
    position: absolute;
    right: 5px;
    cursor: pointer;
    z-index: 9999;
  }
}
</style>
